<template>
  <div class="question-container">
    <el-dialog :visible.sync="dialogVisible" fullscreen>
      <div slot="title" class="title">
        {{ mode === 'add' ? '新增题目' : '修改试题' }}
      </div>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
        class="form"
        label-position="left"
      >
        <el-form-item label="学科" prop="subject">
          <el-select
            v-model="form.subject"
            placeholder="请选择学科"
            style="width:300px;"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select
            v-model="form.step"
            placeholder="请选择阶段"
            style="width:300px;"
          >
            <el-option
              v-for="item in stepList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select
            v-model="form.enterprise"
            placeholder="请选择企业"
            style="width:300px;"
          >
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-cascader
            :props="{ value: 'label' }"
            size="large"
            :options="options"
            v-model="form.city"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio
              v-for="item in typeList"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <hr class="hrMargin" />
        <el-form-item class="setMargin" label="试题标题" prop="title">
          <quill-editor
            :options="{ placeholder: '请输入试题标题...' }"
            v-model="form.title"
            @blur="onEditorBlur('title')"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item class="setMargin" label="答案解析" prop="answer_analyze">
          <quill-editor
            :options="{ placeholder: '请输入答案解析...' }"
            v-model="form.answer_analyze"
            @blur="onEditorBlur('answer_analyze')"
          >
          </quill-editor>
        </el-form-item>
        <hr class="hrMargin" />
        <el-form-item label="答案备注" prop="remark">
          <el-input v-model="form.remark"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    regionData,
    quillEditor
  },
  name: 'QuestionEdit',
  props: {
    subjectList: {
      type: Array,
      default: () => {
        return []
      }
    },
    enterpriseList: {
      type: Array,
      default: () => {
        return []
      }
    },
    stepList: {
      type: Array,
      default: () => {
        return []
      }
    },
    typeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    difficultyList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      options: regionData,
      dialogVisible: false,
      mode: '', // 模式 新增/修改
      form: {
        subject: '', // 学科
        step: '', // 阶段
        enterprise: '', // 企业
        type: 1, // 题型
        difficulty: 1, // 难度
        city: [], //城市
        title: '', // 试题标题
        answer_analyze: '', // 答案解析
        remark: '' // 答案备注
      },
      rules: {
        subject: [
          { required: true, message: '学科不能为空', trigger: 'change' }
        ],
        step: [{ required: true, message: '阶段不能为空', trigger: 'change' }],
        enterprise: [
          { required: true, message: '企业不能为空', trigger: 'change' }
        ],
        type: [{ required: true, message: '题型不能为空', trigger: 'change' }],
        difficulty: [
          { required: true, message: '难度不能为空', trigger: 'change' }
        ],
        city: [{ required: true, message: '城市不能为空', trigger: 'change' }],
        title: [{ required: true, message: '试题标题不能为空' }],
        answer_analyze: [{ required: true, message: '答案解析不能为空' }],
        remark: [
          { required: true, message: '答案备注不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onEditorBlur (field) {
      this.$refs.form.validateField(field)
    },
    submit () {
      console.log('---submit---')
    }
  }
}
</script>
<style lang="less" scoped>
.question-container {
  ::v-deep .el-dialog__header {
    padding: 0px;
    background: transparent;
    text-align: left;
  }
  .title {
    color: rgb(255, 255, 255);
    padding-left: 15px;
    height: 54px;
    line-height: 54px;
    background-color: rgb(4, 188, 250);
  }
  .form {
    width: 832px;
    margin: 0px auto;
  }
  .hrMargin {
    margin-bottom: 20px;
  }
  ::v-deep .ql-editor {
    height: 200px;
  }
  .setMargin {
    ::v-deep .el-form-item__content {
      margin-left: 0 !important;
      margin-top: 40px;
    }
  }
}
</style>
